WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 3D Charts > Tutorials > Code-Behind > Tutorial 04-3D - Adding Zooming, Panning Behavior
Tutorial 04-3D - Adding Zooming, Panning Behavior
Source code for this tutorial can be found at our SciChart.WPF.Examples Github Repository under Tutorials section.
Following on from Tutorial 03-3D - Adding Series to a 3D Chart

Adding Zooming, Panning Behavior

So far in the tutorial series, we have created a new 3D chart, added an X-Axis, Y-Axis and Z-Axis, some series and also some simple base modifiers. We are going to extend this now to add zoom, pan behavior to the chart. Modify the XAML from Tutorial 03 - Adding Series to a 3D Chart as follows:

Adding Zooming, Panning Behavior
Copy Code 
<Window x:Class="Tutorial_04_Adding_Zooming_Panning_Behavior.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s3D="http://schemas.abtsoftware.co.uk/scichart3D"
        Title="Tutorial 04 - Adding Zooming, Panning Behavior"
        Height="550"
        Width="800">

    <Grid>
        <s3D:SciChart3DSurface x:Name="sciChart3DSurface">
            <s3D:SciChart3DSurface.RenderableSeries>
                <s3D:PointLineRenderableSeries3D x:Name="pointLineSeries3D"
                                                 IsAntialiased="True"
                                                 StrokeThickness="2">
                    <s3D:PointLineRenderableSeries3D.PointMarker>
                        <s3D:SpherePointMarker3D Opacity="0.5" Size="16"/>
                    </s3D:PointLineRenderableSeries3D.PointMarker>
                </s3D:PointLineRenderableSeries3D>
            </s3D:SciChart3DSurface.RenderableSeries>
            <s3D:SciChart3DSurface.XAxis>
                <s3D:NumericAxis3D AxisTitle="X-Axis 3D"/>
            </s3D:SciChart3DSurface.XAxis>
            <s3D:SciChart3DSurface.YAxis>
                <s3D:NumericAxis3D AxisTitle="Y-Axis 3D"/>
            </s3D:SciChart3DSurface.YAxis>
            <s3D:SciChart3DSurface.ZAxis>
                <s3D:NumericAxis3D AxisTitle="Z-Axis 3D"/>
            </s3D:SciChart3DSurface.ZAxis>
            <s3D:SciChart3DSurface.ChartModifier>
                <s3D:ModifierGroup3D>
                    <!-- Allows orbital motion of the Camera 3D on Left mouse drag -->
                    <s3D:OrbitModifier3D/>
                    <!-- Allows moving through the 3D World on Right mouse drag -->
                    <s3D:FreeLookModifier3D ExecuteOn="MouseRightButton"/>
                    <!-- Allows zooming the 3D World on mouse wheel -->
                    <s3D:MouseWheelZoomModifier3D/>
                    <!-- Allows zooming to fit on Left mouse double click -->
                    <s3D:ZoomExtentsModifier3D ExecuteOn="MouseDoubleClick"
                                               ResetPosition="-485,536,-485"
                                               ResetTarget="0,100,0"/>
                </s3D:ModifierGroup3D>
            </s3D:SciChart3DSurface.ChartModifier>
        </s3D:SciChart3DSurface>
    </Grid>
</Window>

The above code adds a number of ChartModifiers3D to the SciChart3DSurface.

Now build and run the 3D chart

Congratulations! You now have added some modifier to a 3D chart. This is what you should see.

Try dragging with left/right mouse buttons, using mouse wheel and double clicking on the chart.

Further Reading

Each modifier above has its own configuration properties and are worthy of an article each!

You can find out more be clicking the links below.

 

See Also
SciChart 3D Tutorials

3D Chart Types

The PointLine 3D Chart Type